<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table id="friends_table">
    <thead>
      <tr>
        <td>序号</td>
        <td>名字</td>
        <td>家乡</td>
        <td>未来想去的城市</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <ul id="container"></ul>
  <script>
  const friends = [
    { index: 1, name: '喻顺武', hometown: '南昌', city: '杭州'},
    {index: 2, name: '帅宇翔', hometown: '宜春', city: '深圳'},
    {index: 3, name: '徐毅', hometown: '丰城', city: '杭州'},
    {index:4,name:"王振华",hometown:'江西',city:'杭州'}
  ];
  // 数组的每一项（对象） -> tr>td>
  
  document.getElementById('friends_table')
    .querySelector('tbody')
    .innerHTML = friends.map(function(friend) {
    // console.log(friend);
    return `
      <tr>
        <td>${friend.index}</td>
        <td>${friend.name}</td>
        <td>${friend.hometown}</td>
        <td>${friend.city}</td>
      </tr>
    `
  })

  const qiang = {
    name: "刘国强",
    age: 18,
    job: '大厂女成员的专属鼓励师',
    city: '重庆',
    blo: '写代码就像吃火锅一样，要爽'
  }
  const users = ['夏侯欣', '饶乐',  '王飞'];
  // let html = '';
  // // for (let i = 0; i < users.length; i++) {
  // //   html += '<li>' + users[i]+ '</li>'
  // // }
  // users.forEach(function(user, index) {
  //   html += '<li>' + user+ '</li>'
  // })
  // 数组的每一项从字符串编程 变成html的字符串
  // join 把数据每一项都拼接到一起， ·
  document.getElementById('container').innerHTML = users.map(function(user, index) {
    // console.log(user, index);
    return `<li>${user}</li>`
  }).join('')

  // document.getElementById('container').innerHTML = html;
    // // = '<div>' + qiang.name + '</div>'
    // //   +'<div>'+ qiang.age + '</div>' 
    // //   + '<div>' +qiang.job +'</div>'
    // //   + '<div>' + qiang.city + '</div>'
    // //   + '<div>' + qiang.blo + '</div>';
    // // 字符串  div  qiang.blo 变量  模板 
    //   = `
    //     <div>${qiang.name}</div>
    //     <div>${qiang.age}</div>
    //     <div>${qiang.job}</div>
    //     <div>${qiang.city}</div>
    //     <div>${qiang.blob}</div>
    //   `
  </script>
</body>
</html>
